<div
  class="modal fade"
  data-backdrop="static"
  data-keyboard="false"
  v-kb-modal="isShow"
>
  <div
    class="modal-dialog"
    :class=" { 'modal-sm': isPaying }"
    style="transition: 300ms all;"
  >
    <div class="modal-content">
      <div class="modal-header">
        <button class="close" @click="onHide"
          ><i class="fa fa-close"></i
        ></button>
        <h4 class="modal-title">{{Kooboo.text.common.pay}}</h4>
      </div>
      <div class="modal-body" v-show="!isPaying">
        <div class="form-horizontal">
          <div class="form-group">
            <label class="control-label col-md-3" style="text-align: left;"
              >{{Kooboo.text.common.totalAmount}}</label
            >
            <div class="col-md-9">
              <p class="form-control-static">{{displayAmount}}</p>
            </div>
          </div>
        </div>
        <h5>{{Kooboo.text.component.cashierModal.choosePaymentMethod}}</h5>
        <ul class="list-group">
          <li
            v-for="($data,index) in paymentMethods"
            :key="index"
            class="list-group-item"
            style="min-height: 54px;"
          >
            <div class="radio-inline">
              <label style="margin: 0">
                <input
                  name="method"
                  type="radio"
                  :value="$data.type"
                  v-model="paymentMethod"
                />
                {{$data.displayName}}
              </label>
            </div>
            <input
              v-if="$data.type == 'coupon'"
              type="text"
              class="pull-right form-control input-medium"
              v-model="couponCode"
            />
            <span v-if="$data.type == 'balance'" class="badge gray"
              >{{userBalance}}</span
            >
          </li>
        </ul>
      </div>
      <div class="modal-body" v-show="isPaying">
        <div id="qr-code" style="text-align:center"></div>
      </div>
      <div class="modal-footer">
        <template v-if="isPaying">
          <button class="btn green" @click="onPayingSuccess"
            >{{Kooboo.text.component.topupModal.paid}}</button
          >
          <button class="btn btn-danger" @click="onPayingFailed"
            >{{ Kooboo.text.common.failed}}</button
          >
        </template>
        <template v-else>
          <button class="btn green" @click="onPay"
            >{{ Kooboo.text.common.pay}}</button
          >
          <button class="btn gray" @click="onHide"
            >{{Kooboo.text.common.cancel}}</button
          >
        </template>
      </div>
    </div>
  </div>
</div>
